<template>
  <div class="activities-container">
    <div class="activities-wrapper">
      <div class="header-wrapper">
        <!-- 返回按钮 -->
        <div class="back-button" @click="goBack">
          <el-icon><ArrowLeft /></el-icon>
          <span>返回</span>
        </div>

        <!-- 标题 -->
        <h1 class="page-title">资讯列表</h1>
      </div>

      <!-- 活动列表 -->
      <div class="activity-list">
        <LoadingNodata :loading="loading" :data="activityList">
          <div
            class="activity-item"
            v-for="(item, index) in activityList"
            :key="index"
            @click="goDetail(item.id)"
          >
            <div class="activity-image">
              <img :src="item.thumburl" alt="" />
            </div>
            <div class="activity-content">
              <div class="activity-title">{{ item.title }}</div>
              <div class="activity-deadline">{{ formatDate(item.update_time) }}</div>
            </div>
            <!-- <el-button type="primary" class="register-btn">立即报名</el-button> -->
          </div>
        </LoadingNodata>
      </div>

      <!-- 分页组件 -->
      <div class="pagination-container">
        <Pagination
          :current-page="currentPage"
          :total="totalActivities"
          :page-size="pageSize"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ArrowLeft } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import { formatDate } from "@/utils/index.js";
import { getArticleList } from "@/service/article";
import LoadingNodata from "@/components/LoadingNodata";
import Pagination from "@/components/Pagination.vue";

const router = useRouter();
const route = useRoute();

// 分页数据
const currentPage = ref(1);
const pageSize = ref(10);
const totalActivities = ref(988);
const loading = ref(false);

// 活动列表数据
const activityList = ref([]);

// 返回上一页
const goBack = () => {
  router.back();
};

// 格式化时间
const formatTime = (timestamp) => {
  return formatTimestamp(timestamp, "YYYY-MM-DD HH:mm");
};

// 页码变化处理
const handlePageChange = (page) => {
  currentPage.value = page;
  fetchActivities();
};

const handleSizeChange = (size) => {
  pageSize.value = size;
  fetchActivities();
};

// 获取活动数据
const fetchActivities = (typeid) => {
  // // 模拟数据，实际项目中应该调用API
  loading.value = true;
  const params = {
    page: currentPage.value,
    rows: pageSize.value,
    typeid: typeid || 0,
  };
  getArticleList(params).then((res) => {
    console.log(res, "res");
    activityList.value = res.data.result;
    totalActivities.value = res.data.totalCount;
    loading.value = false;
  });
};

const goDetail = (id) => {
  router.push(`/consultDetail/${id}`);
};

onMounted(() => {
  const { typeid } = route.query
  fetchActivities(typeid);
});
</script>

<style scoped lang="scss">
.activities-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  background-color: #ecf4f2;
  min-height: 100vh;
}

.activities-wrapper {
  width: 1000px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.back-button {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 20px;
  color: #333;

  span {
    margin-left: 5px;
  }

  &:hover {
    color: #126983;
  }
}
.header-wrapper {
  position: relative;
}

.page-title {
  font-size: 20px;
  margin-bottom: 20px;
  font-weight: 500;
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}

.activity-list {
  margin-bottom: 20px;
}

.activity-item {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;

  &:last-child {
    border-bottom: none;
  }
}

.activity-image {
  width: 95px;
  height: 76px;
  background-color: #eee;
  margin-right: 15px;
  flex-shrink: 0;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.activity-content {
  // flex: 1;
  width: 699px;
}

.activity-title {
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-deadline {
  color: #f56c6c;
  font-size: 14px;
  font-weight: 600;
}

.register-btn {
  width: 100px;
  background-color: #126983;
  border-color: #126983;
}

.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.total-activities {
  color: #666;
}
</style>
